<template>
	<view class="friend_request">
		<view class="head">
			<view class="head_li">
				<uni-icons type="back" size="30" color="#fff" class="icon_back" @click="navigBack"></uni-icons>
				<text>新朋友</text>
				<view class="icon" @click="NavigatorFriend">添加</view>
			</view>
		</view>
		<view class="body">
			<view class="b_head">
				<text>好友通知</text>
			</view>
			<view class="list">
				<view class="item" :style="(color == i) ? {backgroundColor:'#adadad'} : {}" @touchstart="color=i" @touchend="color=null"
				 v-for="(item,i) in list" :key="i" @click="(item.type != 3) ? NavigatorAdd(item.uid) : AgreeNavigator(item)">
					<image :src="item.avatar"></image>
					<view class="detail">
						<text class="name">{{item.nickName}}</text>
						<text class="msg">{{item.validate}}</text>
					</view>
					<view class="butom" @touchstart.stop @touchend.stop v-show="item.type === 3" @click="Agree(item)">同意</view>
					<view class="butom_argee" v-show="!(item.type == 3)">{{(item.type === 1) ? '已同意':'等待验证'}}</view>
				</view>
			</view>
			<view class="b_btom">
				<text>查看更多</text>
				<uni-icons type="forward" size="25" color="#bababa" class="icon"></uni-icons>
			</view>
			<view style="background-color: #e6e6e6;height: 40rpx;"></view>
		</view>
		<view class="r_list">
			<view class="l_head">
				<text class="one">可能想认识的人</text>
				<view class="right">
					<text>查看更多</text>
					<uni-icons type="forward" size="20" color="#d3d3d3" class="icon"></uni-icons>
				</view>
			</view>
			<view class="r_item" @click="NavigatorAdd(item.id)" v-for="(item,i) in info" :key="i">
				<view class="left">
					<image :src="item.avatar"></image>
					<view class="one">
						<text class="name">{{item.nickName}}</text>
						<text class="deta">1位共同好友</text>
					</view>
				</view>
				<view class="add" @click.stop="Add(item)">添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import { getCommonFriends,getRequestFriend,addFriend,setFriendAgree} from '../../common/api';
	export default {
		computed: {
			...mapState('info', ['myInfo'])
		},
		data() {
			return {
				color:null,
				info:[],
				list:[],
			};
		},
		onLoad(val) {
			this.uid = val.uid
			this.Init();
		},
		onShow() {
			this.Init();
		},
		methods:{
			Init(){
				getCommonFriends({uid:this.uid}).then((res)=>{
					if(res.code == 200){
						this.info = res.data;
					}
				});
				getRequestFriend({uid:this.uid}).then((res)=>{
					if(res.code == 200){
						this.list = res.data.list;
						this.list = this.list.slice(0,3);
						if(this.list.length < 3){
							for(let i=0;i<res.data.agree.length;i++){
								this.list.push(res.data.agree[i]);
								if(this.list.length === 3) return;
							}
						}
					}
				})
			},
			navigBack(){
				uni.navigateBack();
			},
			NavigatorFriend() {
				uni.navigateTo({
					url: '/subpkg/addFriend_search/addFriend_search?uid='+this.myInfo.id
				})
			},
			NavigatorAdd(id){
				uni.navigateTo({
					url: '/subpkg/personal_details/personal_details?fid='+id
				})
			},
			AgreeNavigator(item){
				uni.navigateTo({
					url: '/subpkg/friend_request_detail/friend_request_detail?uid='+this.myInfo.id+'&fid='+item.uid
				})
			},
			Add(item){
				uni.showLoading();
				
				addFriend({
					remark: item.nickName,
					msg: '我是'+this.myInfo.nickName,
					uid: this.myInfo.id,
					fid: item.id
				}).then((res)=>{
					if(res.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '发送成功',
							duration: 1000
						});
						this.Init();
					}else{
						setTimeout(()=> {
							uni.hideLoading();
							uni.showToast({
								title: '发送失败',
								duration: 1000,
								icon:"none"
							});
						}, 1000);
					}
				});
			},
			Agree(item){
				setFriendAgree({
					uid:this.uid,
					fid:item.uid,
					remark:item.nickName,
				}).then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title: '已同意',
							duration: 1000,
							icon:"none"
						});
						uni.navigateBack();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.friend_request {
		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: fixed;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 110rpx;
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				padding: 10rpx 0rpx;

				text {
					color: #fff;
					font-size: 35rpx;
					opacity: 0.8;
					padding: 15rpx;
					display: flex;
					line-height: 80rpx;
				}

				.icon_back {
					padding: 15rpx 20rpx;
				}

				.icon {
					padding: 8rpx 30rpx;
					color: #fff;
					&:active{
						transform: scale(0.9);
					}
				}
			}
		}
		.body{
			width: 750rpx;
			height: 600rpx;
			position: fixed;
			top: 150rpx;
			.b_head{
				height: 100rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				text{
					padding: 20rpx;
				}
			}
			.list{
				height: 400rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					padding: 20rpx 10rpx;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
					.detail{
						width: 450rpx;
						display: flex;
						flex-direction: column;
						line-height: 50rpx;
						.name{
							font-weight: bold;
							font-size: 35rpx;
						}
						.msg{
							font-size: 28rpx;
							color: #7e7e7e;
						}
					}
					.butom{
						border: 1rpx solid #7e7e7e;
						padding: 10rpx 30rpx;
						border-radius: 10rpx;
						&:active{
							background-color: #adadad;
						}
					}
					.butom_argee{
						// border: 1rpx solid #7e7e7e;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						&:active{
							background-color: #adadad;
						}
					}
				}
			}
			.b_btom{
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #7e7e7e;
				&:active{
					background-color: #e0e0e0;
				}
			}
		}
		.r_list {
			position: fixed;
			top: 790rpx;
			width: 750rpx;
			height: 800rpx;
			background-color: #fff;
		
			.l_head {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid rgba(224, 224, 224, 0.8);
		
				.one {
					padding: 0 20rpx;
				}
		
				.right {
					color: #9c9c9c;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					padding: 0 10rpx;
				}
			}
		
			.r_item {
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				background-color: #fff;
				&:active{
					background-color: #d2d2d2;
				}
		
				.left {
					display: flex;
					align-items: center;
					
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
					.one{
						display: flex;
						flex-direction: column;
						line-height: 50rpx;
						padding: 20rpx;
						.name{
							font-size: 35rpx;
							font-weight: bold;
							color: #2d2d2d;
						}
						.deta{
							font-size: 28rpx;
							color: #9c9c9c;
						}
					}
				}
				.add {
					width: 150rpx;
					height: 60rpx;
					border: 1rpx solid #d2d2d2;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>